<template>
	<view class="container">
		<!-- 分类标题 -->
		<view class="category-header">
			<text class="title">{{ data.categories.title }}</text>
		</view>

		<!-- 分类描述 -->
		<scroll-view class="description-box" scroll-y>
			<view class="description">{{ data.categories.description }}</view>
		</scroll-view>

		<!-- 文章列表 -->
		<view class="article-list">
			<ListCard :articleList="data.articles" v-if="data.articles.length"></ListCard>
			<!-- 如果文章列表为空的时候 -->
			<view class="empty" v-else>
				暂无文章~~~
			</view>
			<view class="empty" v-if="data.show">
				没有更多了
			</view>
		</view>
	</view>
</template>

<script setup>
	import ListCard from '../../components/list_card.vue'
	import {
		reactive,
		ref
	} from 'vue';
	import {
		getFenleiDetail
	} from '../../api/api.js'
	import {
		onLoad,
		onReachBottom,
		onShow
	} from '@dcloudio/uni-app'
	// 模拟数据加载
	const data = reactive({
		categories: {
			title: '',
			description: ''
		},
		articles: [],
		page: 1,
		show: false,
	});
	// 一进入就加载数据
	onLoad(async (opt) => {
		// 这里实际应替换为数据请求
		await loadData(opt.title, data.page);
	});

	// 下拉加载数据
	onReachBottom(async () => {
		if (!data.show) {
			data.page++
			getFenleiDetail({
				title: data.categories.title,
				currentPage: data.page
			}).then(res => {
				if (!res.articles.length) {
					data.show = true
					return
				}
				res.articles.forEach(item => {
					data.articles.push(item)
				})
			})
		}
	})
	const loadData = (title, page) => {
		getFenleiDetail({
			title,
			currentPage: page
		}).then(res => {
			data.categories = res.categories || {}
			data.articles = res.articles || []
			console.log(res);
		})
	}

	const formatDate = (dateStr) => {
		// 实现日期格式化逻辑
		return dateStr.split('日')[0].replace('年', '-').replace('月', '-');
	}

	const handleArticleClick = (id) => {
		uni.navigateTo({
			url: `/pages/detail/detail?id=${id}`
		});
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 20rpx 30rpx;
		background: #f8f8f8;
		min-height: 100vh;
		box-sizing: border-box;
	}

	.category-header {
		width: 100%;
		position: fixed;
		top: -5rpx;
		left: 0;
		z-index: 10;
		padding: 30rpx 0;
		background: #fff;
		border-radius: 16rpx;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);

		.title {
			font-size: 44rpx;
			display: flex;
			font-weight: 600;
			color: #333;
			justify-content: center;
			align-items: center;
			position: relative;

			&::after {
				content: '';
				position: absolute;
				bottom: -10rpx;
				left: 50%;
				transform: translateX(-50%);
				width: 80rpx;
				height: 6rpx;
				background: linear-gradient(90deg, #2da9f8 0%, #6ec4ff 100%);
				border-radius: 3rpx;
			}
		}
	}

	.description-box {
		background: #fff;
		margin: 130rpx 0 30rpx 0;
		box-sizing: border-box;
		padding: 30rpx;
		border-radius: 16rpx;
		height: auto;
		overflow: hidden;

		.description {
			text-indent: 2em;
			font-size: 28rpx;
			color: #666;
			line-height: 1.8;
		}
	}

	.article-list {
		.empty {
			width: 100%;
			height: auto;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
</style>